<template>
  <div>
    <a-row :gutter="20">
      <a-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
        <Personal />
      </a-col>
      <a-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
        <a-card hoverable :bordered="false" size="small">
          <a-tabs size="small" v-model:activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="userform" tab="用户资料"><Userinfo /></a-tab-pane>
            <a-tab-pane key="userlog" tab="操作日志" force-render
              ><Userlog ref="userlogRef"
            /></a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import Personal from './personal.vue';
  import Userlog from './userlog.vue';
  import Userinfo from './userinfo.vue';
  export default defineComponent({
    components: {
      Personal,
      Userinfo,
      Userlog,
    },
    setup() {
      const userlogRef = ref();

      const tabChange = (key: string) => {
        if ('userlog' === key) {
          userlogRef.value.loadLogs();
        }
      };
      return { activeKey: ref('userform'), tabChange, userlogRef };
    },
  });
</script>
